<template>
	<view>
		<page-meta>
			 
		    <navigation-bar
		      :title="nbTitle"
		      :title-icon="titleIcon"
		      :title-icon-radius="titleIconRadius"
		      :subtitle-text="subtitleText"
		      :subtitle-color="nbFrontColor"
		      :loading="nbLoading"
		      :front-color="nbFrontColor"
		      :background-color="nbBackgroundColor"
		      :color-animation-duration="2000"
		      color-animation-timing-func="easeIn"
		    />
		</page-meta> 
		
		<view class="warningV">
			<view v-for="(item, index) in indexList" :key="index" @click="LineNoSet(item)">
				<view class="list-cell"> 
					<view class="">
						<u-row gutter="" >
							<u-col span="4">
								<view class="demo-layout bg-purple">
									<!-- <text>告警类型：</text> -->
									<u-icon :name="item.icon" color="#ff0000" size="28"></u-icon>
									  {{ item.name }}
								</view>
							</u-col>
							<u-col span="3">
								<view class="demo-layout bg-purple-light">
									<text>线路</text>
									  {{ item.lineNo }}
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout bg-purple-dark">
									 <text>时间：</text>
									 {{item.time}}
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				 
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				mobile: '',
				code: '',
				list:'',
				nbTitle: '告警信息',
				titleIcon: '/static/logo.png',
				titleIconRadius: '20px',
				subtitleText: 'subtitleText',
				nbLoading: false,
				nbFrontColor: '#000000',
				nbBackgroundColor: '#ffffff',
				
				indexList:[{
					name:"漏电预警",
					lineNo:"1",
					time:"2022/04/20",
					icon:"warning"
				},{
					name:"过压预警",
					lineNo:"2",
					time:"2022/04/24",
					icon:"warning"
				},
				{
					name:"欠压预警",
					lineNo:"9",
					time:"2022/04/23",
					icon:"warning"
				},
				{
					name:"故障",
					lineNo:"2",
					time:"2022/04/21",
					icon:"error-circle-fill"
				},
				{
					name:"故障",
					lineNo:"4",
					time:"2022/04/22",
					icon:"error-circle-fill"
				},
				{
					name:"过流预警",
					lineNo:"6",
					time:"2022/04/24",
					icon:"warning"
				},
				]
			}
		},
		methods: {
			LineNoSet(item){
				console.log(item)
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		padding: 24rpx;
	}
	.u-row {
		margin: 40rpx 0;
	}	
</style>
